<template>
  <div class="device-alarm-system">
    <div class="sub-title">设备报警类型趋势图</div>
    <div class="alarm-type-label common-label">
      <div class="sensor-exception label">
        <div class="label-color"></div>
        <div class="label-name">传感器异常</div>
      </div>
      <div class="connection-lost label">
        <div class="label-color"></div>
        <div class="label-name">链接丢失</div>
      </div>
      <div class="warning-instance-exception label">
        <div class="label-color"></div>
        <div class="label-name">警情异常</div>
      </div>
    </div>
    <div id="alarm-type-chart" class="alarm-type-chart common-chart"></div>
    <div class="sub-title">不同类型设备报警次数对比</div>
    <div class="diffrent-type-label common-label">
      <div class="scm label">
        <div class="label-color"></div>
        <div class="label-name">烟雾传感器</div>
      </div>
      <div class="fireplug label">
        <div class="label-color"></div>
        <div class="label-name">消防栓</div>
      </div>
    </div>
    <div id="diffrent-type-chart" class="diffrent-type-chart common-chart"></div>
  </div>
</template>

<script>
  import Config from '../../../config'
  export default {
    name: 'DeviceAlarmSystem',
    data () {
      return {
        colorMap: new Map()
      }
    },
    props: {
      schedule: {
        type: Number,
        default: 0
      }
    },
    watch: {
      schedule (v1, v2) {
        console.log('该更新了')
        this.refresh()
      }
    },
    created () {
      this.initColorMap()
    },
    methods: {
      initColorMap () {
        this.colorMap.set('传感器异常', '#FA34BE')
        this.colorMap.set('链接丢失', '#03FFFF')
        this.colorMap.set('警情异常', '#4E46FE')
        this.colorMap.set('烟雾报警器', '#2BD4FF')
        this.colorMap.set('消防栓', '#FC9B6E')
      },
      refresh () {
        this.getAlarmTypeData()
        this.getDifferentTypeData()
      },
      getAlarmTypeData () {
        const url = `${Config.FIREPLUG}/fireplug/alarm/count1`
        this.$http.get(url)
          .then(data => {
            const data1 = []
            const data2 = []
            const data3 = []
            const data4 = []
            data.forEach(item => {
              data1.push(item[0])
              data2.push(item[1])
              data3.push(item[2])
              data4.push(item[3])
            })
            this.drawChart(this.createAlarmTypeChartData(data1, data2, data3, data4))
          })
          .catch(e => {
            this.drawChart(this.createAlarmTypeChartData([], [], [], []))
          })
      },
      /**
       * 创建设备报警类型echart数据
       * */
      createAlarmTypeChartData (data1, data2, data3, data4) {
        const xAxis = {
          // type: 'category',
          data: data1,
          axisLine: {
            lineStyle: {
              color: '#142E52'
            }
          },
          axisTick: {
            show: false // 不显示刻度线
          }
        }
        const series = [
          {
            name: '传感器异常',
            type: 'line',
            animationDuration: 1500,
            smooth: true,
            symbolSize: 0,
            data: data2,
            itemStyle: this.createAlarmTypeLineItemStyle('sensorException')
          },
          {
            name: '链接丢失',
            type: 'line',
            animationDuration: 1500,
            smooth: true,
            symbolSize: 0,
            data: data3,
            itemStyle: this.createAlarmTypeLineItemStyle('connectionLost')
          },
          {
            name: '警情异常',
            type: 'line',
            animationDuration: 1500,
            smooth: true,
            symbolSize: 0,
            data: data4,
            itemStyle: this.createAlarmTypeLineItemStyle('warningInstanceException')
          }
        ]
        console.log(xAxis, series)
        return {xAxis, series, id: 'alarm-type-chart', trigger: 'axis'}
      },
      /**
       * 创建设备报警类型itemStyle
       * @param type {String} 数据类型
       * @return itemStyle {Object}
       * */
      createAlarmTypeLineItemStyle (type) {
        const colorObj = {
          sensorException: ['rgba(250, 52, 190, 0.1)', 'rgba(250, 52, 190, 1)'],
          connectionLost: ['rgba(3, 255, 255, 0.1)', 'rgba(3, 255, 255, 1)'],
          warningInstanceException: ['rgba(78, 70, 254, 0.1)', 'rgba(78, 70, 254, 1)'],
        }
        return {
          normal: {
            color: '#fff',
            barBorderRadius: 500,
            lineStyle: {        // 系列级个性化折线样式
              width: 3,
              type: 'solid',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: colorObj[type][0] // 0% 处的颜色
                }, {
                  offset: 0.5, color: colorObj[type][1] // 50% 处的颜色
                }, {
                  offset: 1, color: colorObj[type][0] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },//线条渐变色
              globalCoord: false
            }
          }
        }
      },
      getTooptip (params) {
        return `<div class="tooltip-box">
          <div class="data-top">数量：${params.data}</div>
          <div class="data-bottom">日期：${params.name}</div>
        </div>`
      },
      getDifferentTypeData () {
        const url = `${Config.FIREPLUG}/fireplug/alarm/count2`
        this.$http.get(url)
          .then(data => {
            const data1 = []
            const data2 = []
            const data3 = []
            data.forEach(item => {
              data1.push(item[0])
              data2.push(item[1])
              data3.push(item[2])
            })
            this.drawChart(this.createDifferentTypeChartData(data1, data2, data3))
          })
          .catch(e => {
            this.drawChart(this.createDifferentTypeChartData([], [], []))
          })
      },
      /**
       * 创建不同类型设备报警次数对比echart数据
       * */
      createDifferentTypeChartData (data1, data2, data3) {
        const me = this
        const xAxis = [{
          type: 'category',
          data: data1,
          axisLine: {
            lineStyle: {
              color: '#142E52'
            },
            axisLine: {
              show: false
            }
          },
          axisTick: {
            show: false // 不显示刻度线
          }
        }]
        const series = [
          {
            name: '烟雾报警器',
            type: 'bar',
            animationDuration: 1500,
            data: data2,
            itemStyle: this.createDifferentTypeLineItemStyle('scm'),
            tooltip: {
              backgroundColor: me.colorMap.get('烟雾报警器'),
              formatter: function (params, ticket, callback) {
                return me.getTooptip(params)
              }
            }
          },
          {
            name: '消防栓',
            type: 'bar',
            animationDuration: 1500,
            data: data3,
            itemStyle: this.createDifferentTypeLineItemStyle('fireplug'),
            tooltip: {
              backgroundColor: me.colorMap.get('消防栓'),
              formatter: function (params, ticket, callback) {
                return me.getTooptip(params)
              }
            }
          }
        ]
        return {xAxis, series, id: 'diffrent-type-chart', trigger: 'item'}
      },
      /**
       * 创建设备报警类型itemStyle
       * @param type {String} 数据类型
       * @return itemStyle {Object}
       * */
      createDifferentTypeLineItemStyle (type) {
        const colorObj = {
          scm: ['rgba(43, 212, 255, 0.1)', 'rgba(43, 212, 255, 1)'],
          fireplug: ['rgba(252, 155, 110, 0.1)', 'rgba(252, 155, 110, 1)']
        }
        return {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: colorObj[type][0] // 0% 处的颜色
              }, {
                offset: 1, color: colorObj[type][1] // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      },
      getFormatter (type, params) {
        if (type === 'item') {
          return ''
        }
        return `<div class="alarm-tooltip-box">
          <div class="data-bottom">${params[0].seriesName}：${params[0].value}</div>
          <div class="data-bottom">${params[1].seriesName}：${params[1].value}</div>
          <div class="data-bottom">${params[2].seriesName}：${params[2].value}</div>
          <div class="data-bottom">日期：${params[0].axisValue}</div>
        </div>`
      },
      /**
       * 绘制echart图
       * @param Object {xAxis, series}
       * */
      drawChart (data) {
        const me = this
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById(data.id)
        if (!dom) {
          return
        }
        const chart = this.$echarts.init(dom)
        // 绘制图表
        chart.setOption({
          title: { text: '' },
          tooltip: {
            trigger: data.trigger,
            backgroundColor: '#2f4c9c',
            formatter: function (params, ticket, callback) {
              return me.getFormatter(data.trigger, params)
            }
          },
          xAxis: data.xAxis,
          // x轴和y轴文字
          axisLabel: {
            color: '#598CC9'
          },
          yAxis: {
            show: true,
            splitLine: {
              show: false // 去除网格线
            },
            axisLine: {
              lineStyle: {
                color: '#142E52'//  y轴坐标轴颜色
              }
            },
            axisTick: {
              show: false // 不显示刻度线
            },
            splitNumber: 2
          },
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#3CDDFF'
          }, {
            offset: 1,
            color: '#3C81FF'
          }]),
          series: data.series,
          grid: {
            x: 60,
            y: 20,
            x2: 10,
            y2: 20,
            borderWidth: 1
          },
          barWidth: 12
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .device-alarm-system {
    .common-chart {
      & /deep/ .alarm-tooltip-box {
        color: #fff;
        width: 120px;
        .data-bottom {
          font-size: 12px;
        }
      }
      & /deep/ .tooltip-box {
        color: #fff;
        width: 82px;
        .data-top {
          font-size: 16px;
        }
        .data-bottom {
          font-size: 12px;
        }
      }
    }
    .sub-title {
      color: #598CC9;
      margin-bottom: 29px;
      font-size: 14px;
      font-weight: bold;
    }
    .common-label {
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #598CC9;
      font-size: 12px;
      margin-bottom: 30px;
      .label {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .label-color {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }
    .alarm-type-label {
      .sensor-exception {
        .label-color {
          background-color: #FA34BE;
          box-shadow: 0 7px 5px rgba(250, 52, 190, .7);
        }
      }
      .connection-lost {
        .label-color {
          background-color: #03FFFF;
          box-shadow: 0 7px 5px rgba(3, 255, 255, .7);
        }
      }
      .warning-instance-exception {
        .label-color {
          background-color: #4E46FE;
          box-shadow: 0 7px 5px rgba(78, 70, 254, .7);
        }
      }
    }
    .alarm-type-chart {
      height: 140px;
      margin-bottom: 30px;
    }
    .diffrent-type-label {
      box-sizing: border-box;
      padding: 0 70px;
      .scm {
        .label-color {
          background-color: #2BD4FF;
          box-shadow: 0 7px 5px rgba(43, 212, 255, .7);
        }
      }
      .fireplug {
        .label-color {
          background-color: #FC9B6E;
          box-shadow: 0 7px 5px rgba(252, 155, 110, .7);
        }
      }
    }
    .diffrent-type-chart {
      height: 140px;
    }
  }
</style>
